<template>
  <view class="package-record-page">
    <!-- 记录列表容器 -->
    <view class="record-list">
      <view class="record-item" v-for="(record, index) in packageRecords" :key="index" @click="goToDetail(record, index)">
        <!-- 时间信息 -->
        <text class="record-time">{{ record.time }}</text>
        
        <!-- 会员信息区域 -->
        <view class="member-info">
          <text class="info-item">会员姓名：{{ record.memberName }}</text>
          <text class="info-item">会员卡号：{{ record.memberId }}</text>
          <text class="info-item">手机号：{{ record.phone }}</text>
          <text class="info-item">套餐名称：{{ record.packageName }}</text>
        </view>
        
        <!-- 退款按钮 -->
        <button class="refund-btn" @click="(e) => handleRefund(index, e)">退款</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 套餐记录数据
      packageRecords: [
        {
          time: '2025-10-24 15:00:00',
          memberName: '张三',
          memberId: '12345678',
          phone: '152xxxxxxxx',
          packageName: '100次游乐票 ×1'
        },
        {
          time: '2025-10-24 15:00:00',
          memberName: '张三',
          memberId: '12345678',
          phone: '152xxxxxxxx',
          packageName: '100分钟票 ×1'
        },
        {
          time: '2025-10-24 15:00:00',
          memberName: '张三',
          memberId: '12345678',
          phone: '152xxxxxxxx',
          packageName: '休闲月票 ×1'
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.ticketSalesRecord')
  	});
  },
  methods: {
    // 跳转到详情页
        goToDetail(record, index) {
          // 传递记录数据到详情页
          uni.navigateTo({
            url: `/pages/order/ticket-sales-record-detail?recordIndex=${index}&recordData=${encodeURIComponent(JSON.stringify(record))}`
          });
        },
        
        // 处理退款操作
        handleRefund(index, event) {
          // 阻止事件冒泡，避免触发卡片点击
          event && event.stopPropagation && event.stopPropagation();
      const record = this.packageRecords[index];
      uni.showModal({
        title: '确认退款',
        content: `是否为【${record.memberName}】的"${record.packageName}"办理退款？`,
        confirmText: '确认退款',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            // 实际项目中调用退款接口
            uni.showToast({
              title: '退款成功',
              icon: 'success'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
/* 页面容器 - 100%高度 */
.package-record-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 16px;
  box-sizing: border-box;
}

/* 记录列表容器 */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 单条记录样式 */
.record-item {
  background-color: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  position: relative; /* 用于退款按钮定位 */
}

/* 时间信息样式 */
.record-time {
  display: block;
  font-size: 14px;
  color: #888;
  margin-bottom: 14px;
  padding-left: 4px;
}

/* 会员信息区域 */
.member-info {
  padding-right: 70px; /* 预留退款按钮位置，避免文本被覆盖 */
}

/* 信息项样式 */
.info-item {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* 最后一项信息移除底部间距 */
.info-item:last-child {
  margin-bottom: 0;
}

/* 退款按钮样式 */
.refund-btn {
  position: absolute;
  top: 24px;
  right: 16px;
  width: 60px;
  height: 32px;
  line-height: 32px;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  transition: all 0.2s;
}

.refund-btn:active {
  background-color: #f5222d;
  transform: scale(0.96);
}

/* 适配小屏设备 */
@media (max-width: 320px) {
  .refund-btn {
    position: static;
    width: 100%;
    margin-top: 12px;
  }
  
  .member-info {
    padding-right: 0;
  }
}
</style>